<template>
    <div class="scroll-list" @touchstart="touchStar" @touchmove="touchMove" @touchend="touchEnd" @touchcancel="touchEnd">
        <div class="scroll-loading-top" v-if="!disabled" :style="loadingWrapStyle">
            <span :style="{'height':offset + 'px'}">
                <i class="uicon uicon-pull" :class="{'run':loading}"></i>
                <label>{{loading ? '正在加载' : (canLoad ? '释放加载' : '下拉加载' )}}</label>
            </span>
        </div>
        <!-- <p class="scroll-tip-wrap" v-if="done.status"></p> -->
        <p class="scroll-tip" :style="done.style" v-if="done.status">
            {{done.count >0 ? '又发现'+done.count+'条新内容' : '没有发现新数据'}}
        </p>
        <slot></slot>
        <p class="scroll-bottom-tip" v-if="!isApp && config.bottom !== 'hidden'"> 
            
            <label v-if="config.bottom == 'done'" class="list-end">已显示全部数据</label>
            <template v-else>
                 <i class="uicon uicon-pull run"></i>
                <label>{{config.bottom ? '加载中...' : '释放加载'}}</label>
            </template>
           
        </p>
    </div><!-- end scrol-list -->
</template>
<script>

const supportPageOffset = window.pageXOffset !== undefined;
const isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");


export default {
    name:'scroll-list',
    props:{
        disabled:{
            type:Boolean,
            default:false
        },
        config:{
            type:Object,
            defalut:{
                pull:false,
                bottom:false,
            }
        },
        offset:{
            type:Number,
            default:80
        },
    },
    data(){
        return {
            isApp:this.$utils.app.isApp,
            canPull:false,
            loading:false,
            canLoad:false,
            time:0,
            moveY:0,
            y:0,
            target:'',
            done:{
                status:false,
                count:0,
                style:{
                    top:0
                }
            }
        }
    },
    computed:{
        loadingWrapStyle(){
            if(this.moveY > 0){
                this.$parent.$emit('SCORLL_PULL')
            }
            return this.disabled && this.canPull ? {
                'height':'0',
                'transition-duration':'0'
            } : {
                "height": `${this.moveY}px`,
                'transition-duration':`${this.time}ms`
            }
        },
    },
    mounted(){
        let target = document.querySelector(this.config.target);
        if(target){
            this.target = target;
            target.addEventListener('scroll',this.scrollHandle);         
        }else{
            window.addEventListener('scroll',this.scrollHandle)
        }

        this.$on('refresh_done',num=>{
            this.done.count = num;
            this.done.status = true;
            this.done.style.top = this.$el.getBoundingClientRect().top + 'px'

            setTimeout(()=>{
                this.done.status = false;
            },2000)
        })
    },
    // destroyed(){
    //     window.removeEventListener('scroll',this.scrollHandle)
    // },
    methods:{
        load(cb){
            if(this.config.pull) return false;
            this.loading = true;
            this.$emit('pull',cb);
        },
        isTop(){
           
            return this.target ? this.target.scrollTop == 0 : this.scrollY() == 0;
        },
        scrollY(){
            return this.target ? this.target.scrollTop : (supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop);
        },
        scrollHandle(e){
            let y = this.scrollY();
            this.checkLoadMore(y);
        },
        checkLoadMore(y){
            if(this.config.bottom) return false;
            //是否滚动到到底部
            let winH = this.target ? this.target.offsetHeight : window.innerHeight;
            let bodyH =  this.target ? this.target.scrollHeight : document.body.clientHeight;
            if(bodyH> winH && y == bodyH - winH){
                this.$emit('bottom');
            }
        },
        touchStar(e){
            if(this.disabled) return false;
            if (this.isTop()) {
                this.canPull = true;
            } else {
                this.canPull = false;
            }
       
            this.y = e.touches[0].pageY;
        
        },
        touchMove(e){
            if(!this.canPull || this.disabled) {
                return false;
            }
            if(this.disabled || this.loading){
                return false;
            }

            
            let curY = e.touches[0].pageY,
                movY = curY - this.y;
            if(movY >= 0){
                e.preventDefault();
                e.stopPropagation();
                this.canLoad = movY >= this.offset;
                movY = movY > 100 ? 100 : movY;
                this.move(movY,0)
            }
        },
        touchEnd(e){
            if(this.disabled) return false;
            if(this.moveY >= this.offset) {
                this.move(this.offset,0);
                this.load(()=>{
                    this.loading = false;
                    this.canLoad = false;
                    this.move(0);
                });
            }else{
                this.move(0);
            }
            this.y = 0;
            
        },
        move(y,time = 300){
           this.moveY = y;
           this.time = time;
        //    this.time == 300 && setTimeout(()=>{
        //         this.move(0)
        //    },300)
  
        }
    }
}
</script>
<style lang="less">
.scroll-loading-top {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    color:#c6c6c6;
    font-size:24px;
    overflow: hidden;
    transition-property: height;
    span {
        margin-top:20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-grow: 0;
        flex-shrink: 0;
        label {
            margin-top:20px;
        }
    }
    

}
.scroll-tip-wrap {
    height:70px;
}
    .scroll-tip {
        display: flex;
        justify-content: center;
        align-items: center;
        z-index:99999;
        left:0;
        right:0;
        font-size:30px;
        color:#fff;
        height:70px;
        background-color: rgba(256,107,64,.94);
    }

    .scroll-bottom-tip {
        height:140px;
        display: flex;
        justify-content: center;
        align-items: center;
        color:#919191;
        font-size:24px;
        .mini {
            margin-right:15px;
        }
    }
</style>


